<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //? 首尾节流：是指在时间间隔内的第一次触发事件和最后一次触发事件时执行函数，然后在间隔时间内忽略所有的其他触发事件
    function throttleBoth(fn,delay) {
        let timer = null
        let time = Date.now()
        return function (...args) {
            let now = Date.now()
            //? 第一次进入 timer不存在 直接执行 这是首节流
            if (!timer) {
                fn(...args)
                //? timer不为null 方便执行尾节流
                timer = 1
            }
            else {
                //? 超时判断 这是尾节流
                if (now - time < delay) {
                    clearTimeout(timer)
                    timer = null
                    timer = setTimeout(() => {
                        fn(...args)
                        //? 最后一次事件执行 timer重新置为null 代表此时间间隔内首尾节流完毕
                        timer = null
                        //? 重设时间 以准备下一个时间间隔
                        time = Date.now()
                    },delay + time - now)
                }
            }
        }
    }
    function testThrottleBoth() {
        console.log('throttleBoth test start');
        const throttleFunc = throttleBoth(function() {
            console.log('throttleBoth function called');
        }, 1000);
        throttleFunc(); //? 首次 执行
        setTimeout(throttleFunc, 500); //? 被节流 不执行
        setTimeout(throttleFunc, 800); //? 1000节流的最后一次请求 会执行
        setTimeout(throttleFunc, 1500); //? 新的时间间隔 执行
        // setTimeout(throttleFunc, 3500);
    }
    testThrottleBoth();
</script>
</body>
</html>
